<template>
  <view class="j-tabbar" @touchmove.stop.prevent="() => {}">
    <view class="j-tabbar_content">
      <view class="j-tabbar_content_item" :class="[index===value && 'j-tabbar_content_item_active']" v-for="(item,index) in list" :key="index" @tap="clickTab(index)">
        <view class="j-tabbar_content_item_icon">
          <u-icon :name="index===value?item.selectedIconPath:item.iconPath" :size="iconSize" :color="index===value?'#0088ff':'#515151'" :custom-prefix="item.customPrefix?'custom-icon':'uicon'"></u-icon>
          <u-badge v-if="item.count" type="error" :count="item.count" :offset="[-10, -20]"></u-badge>
        </view>
        <view class="j-tabbar_content_item_text">{{item.text}}</view>
      </view>
    </view>
    <view class="j-tabbar_occupied"></view>
  </view>
</template>

<script>
export default {
  name: "j-test",
  props: {
    // 配置参数
    list: {
      type: Array,
      default () {
        return []
      }
    },
    iconSize: {
      type: [String, Number],
      default: 50
    },
    value:{
      type:Number,
      default: 0
    }
  },
  data() {
    return {
      msg: "j-test组件\n标题都不写，这不是什么善茬"
    }
  },
  methods: {
    clickTab(index){
      this.$emit("input",index)
    }
  },created(){
    uni.hideTabBar()
  }
}
</script>

<style lang="scss" scoped>
.j-tabbar{

  &_content{
    position: relative;
    position: fixed;
    display: flex;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background-color: #fff;

    &_item{
      flex: 1;
      //position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      &_icon{
        position: relative;
        display: flex;
        justify-content: center;
      }

      &_text{
        text-align: center;
        width: 100%;
        height: 0rpx;
        font-size: 24rpx;
        transition: all 0.5s;
        transform: scale(0);
      }

      &_active{

        .j-tabbar_content_item_text{
          transform: scale(1);
          height: 28rpx;
          color: #0088ff;
        }
      }
    }

  }

  &_occupied{
    height: 100rpx;
    width: 100%;
  }
}
</style>
